<script setup lang="ts">
import Upload from "@/views/form/validateForm/components/Upload.vue";
import OneIdCardOther from "@/components/IdCardPhoto/index.vue";
import { onMounted, reactive, ref } from "vue";
import { FormInstance, FormRules } from "element-plus";
import { validateIdCardNumber, validatorMethod, verifyAge, verifyPhone } from "@/utils/validate";
import { reqAreaTreeSelect } from "@/api/system/user";

const props = defineProps({
  peaFrom: {
    required: true
  }
});
const hzBaseFromRef = ref<FormInstance>();
const areaOptions = ref();
const regionParams = ref({
  label: "label", //这里可以配置你们后端返回的属性
  value: "id",
  children: "children",
  checkStrictly: true
});

// 验证规则
const rules = reactive<FormRules>({
  hzName: [{ required: true, message: "请输入户主姓名", trigger: "blur" }],
  hzSex: [{ required: true, message: "请选择户主性别", trigger: "blur" }],
  hzAge: [
    { required: true, message: "请输入户主年龄", trigger: "blur" },
    { validator: validatorMethod(verifyAge, "年龄输入错误，请输入正确的年龄"), trigger: "blur" }
  ],
  hzPhoneNumber: [
    { required: true, message: "请输入户主的电话号码", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur"
    }
  ],
  hzIdCardNumber: [
    { required: true, message: "请输入户主的身份证号", trigger: "blur" },
    { validator: validateIdCardNumber, trigger: "blur" }
  ],
  xingZhengArea: [{ required: true, message: "请选择户主所在行政区域", trigger: "blur" }],
  familyAddress: [{ required: true, message: "请填写家庭详细地址", trigger: "blur" }],
  hzMarriage: [{ required: true, message: "请选择户主婚姻状况", trigger: "blur" }],
  hzNation: [{ required: true, message: "请选择户主民族", trigger: "blur" }],
  hzIdCardFront: [{ required: true, message: "请上传户主身份证正面照片", trigger: "blur" }],
  hzIdCardReverse: [{ required: true, message: "请上传户主身份证反面照片", trigger: "blur" }],
  hzAddressPho: [{ required: true, message: "请上传户口薄首页照片", trigger: "blur" }],
  hasInVillager: [{ required: true, message: "请选择", trigger: "blur" }],
  familySize: [{ required: true, message: "请选择家庭人数", trigger: "blur" }],
  familyLoaderSize: [{ required: true, message: "请选择家庭劳动力人数", trigger: "blur" }],
  hasIll: [{ required: true, message: "请选择家庭成员是否有重疾病患者", trigger: "blur" }],
  farmerType: [{ required: true, message: "请选择农户类型", trigger: "blur" }],
  hasPingKunHu: [{ required: true, message: "请选择", trigger: "blur" }],
  maxXueLi: [{ required: true, message: "请选择家庭最高学历", trigger: "blur" }],
  hasLand: [{ required: true, message: "请选择", trigger: "blur" }],
  landArea: [{ required: true, message: "请填写承包面积", trigger: "blur" }],
  canQuanNum: [{ required: true, message: "请填写产权证编号", trigger: "blur" }],
  landPho: [{ required: true, message: "请上传承包土地经营证书", trigger: "blur" }],
  hasTransLand: [{ required: true, message: "请选择是否流转土地", trigger: "blur" }],
  transArea: [{ required: true, message: "请输入流转面积", trigger: "blur" }],
  treeArea: [{ required: true, message: "请输入山林面积", trigger: "blur" }],
  treeDeedNum: [{ required: true, message: "请输入林权证编号", trigger: "blur" }],
  treeDeedPho: [{ required: true, message: "请上传林权证", trigger: "blur" }],
  hasFrameHouse: [{ required: true, message: "请选择", trigger: "blur" }]
});

// 进行表单校验
const submitHzForm = async () => {
  if (!hzBaseFromRef) return;
  // 创建一个 Promise 对象
  return new Promise((resolve, reject) => {
    hzBaseFromRef.value.validate((valid, fields) => {
      if (valid) {
        resolve(true);
      } else {
        reject(fields);
      }
    });
  });
};
// 清理表单
const reSet = () => {
  hzBaseFromRef.value.resetFields();
};

onMounted(async () => {
  // 获取新政区域
  // 获取地域树信息
  await reqAreaTreeSelect().then((req) => {
    areaOptions.value = req.data;
  });
});

defineExpose({
  submitHzForm,
  reSet
});
</script>

<template>
  <el-form ref="hzBaseFromRef" :model="peaFrom" label-width="110px" label-position="top" :rules="rules">
    <el-divider content-position="left"><span class="el-divider-h4">户主基本信息采集</span></el-divider>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="户主姓名" prop="hzName">
          <el-input
            v-model="peaFrom.hzName"
            placeholder="请输入户主姓名"
            show-word-limit
            clearable
            maxlength="50"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="户主性别" prop="hzSex">
          <el-select
            v-model="peaFrom.hzSex"
            placeholder="请选择户主性别"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dict.type.pea_sex"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="户主年龄" prop="hzAge">
          <el-input
            v-model="peaFrom.hzAge"
            placeholder="请输入户主年龄"
            clearable
            show-word-limit
            maxlength="3"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="手机号码（户主）" prop="hzPhoneNumber">
          <el-input
            v-model="peaFrom.hzPhoneNumber"
            placeholder="请输入手机号码（户主）"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
            maxlength="11"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号码（户主）" prop="hzIdCardNumber">
          <el-input
            v-model="peaFrom.hzIdCardNumber"
            placeholder="请输入身份证号码（户主）"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
            maxlength="18"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="户主所在行政区域" prop="xingZhengArea">
          <el-cascader
            v-model="peaFrom.xingZhengArea"
            :options="areaOptions"
            :style="{ width: '100%' }"
            placeholder="行政区域"
            :props="regionParams"
            clearable
          >
            <template #default="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="家庭详细住址" prop="familyAddress">
          <el-input
            v-model="peaFrom.familyAddress"
            placeholder="请输入家庭详细住址"
            clearable
            maxlength="100"
            show-word-limit
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="婚姻状况" prop="hzMarriage">
          <el-select
            v-model="peaFrom.hzMarriage"
            placeholder="请输入户主婚姻状况"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in dict.type.pea_marital_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="民族" prop="hzNation">
          <el-select
            v-model="peaFrom.hzNation"
            placeholder="请输入户主民族"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in dict.type.pea_nationality"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="身份证正面" prop="hzIdCardFront">
          <!--上传图片组件        -->
          <!--action  请求的url    -->
          <OneIdCardOther
            v-model:Url="peaFrom.hzIdCardFront"
            :title="'请上传身份证正面照片'"
          ></OneIdCardOther>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="身份证反面" prop="hzIdCardReverse">
          <OneIdCardOther
            v-model:Url="peaFrom.hzIdCardReverse"
            :title="'请上传身份证反面照片'"
          ></OneIdCardOther>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="户口住址页" prop="hzAddressPho">
          <OneIdCardOther
            v-model:Url="peaFrom.hzAddressPho"
            :title="'请上传户口住址页照片'"
          ></OneIdCardOther>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left"><span class="el-divider-h4">户主详细信息采集</span></el-divider>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="是否为本村人" prop="hasInVillager">
          <el-radio-group v-model="peaFrom.hasInVillager">
            <el-radio
              v-for="item in dict.type.pea_in_villager"
              :key="item.index"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="家庭人数" prop="familySize">
          <el-select
            v-model="peaFrom.familySize"
            placeholder="请输入家庭人数"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dict.type.pea_peo_num"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="家庭劳动力人数" prop="familyLoaderSize">
          <el-select
            v-model="peaFrom.familyLoaderSize"
            placeholder="请输入家庭劳动力人数"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dict.type.pea_peo_num"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="家庭成员是否有重疾病患者（癌症及严重慢性疾病）" prop="hasIll">
          <el-radio-group v-model="peaFrom.hasIll">
            <el-radio
              v-for="(item, index) in dict.type.pea_has_null"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="农户类型" prop="farmerType">
          <el-checkbox-group v-model="peaFrom.farmerType">
            <el-checkbox
              v-for="item in dict.type.pea_farmer_type"
              :key="item.value"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="是否建档立卡贫困户" prop="hasPingKunHu">
          <el-radio-group v-model="peaFrom.hasPingKunHu">
            <el-radio
              v-for="item in dict.type.pea_yes_no"
              :key="item.value"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="家庭成员最高学历（以户口簿内人员为准）" prop="maxXueLi">
          <el-select
            v-model="peaFrom.maxXueLi"
            placeholder="请选择家庭最高学历"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in dict.type.pea_education"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="是否有农村土地经营证书" prop="hasLand">
          <el-radio-group v-model="peaFrom.hasLand">
            <el-radio
              v-for="item in dict.type.pea_yes_no"
              :key="item.value"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="承包面积（亩）" prop="landArea">
          <el-input
            v-model="peaFrom.landArea"
            placeholder="请输入土地承包面积（亩）"
            maxlength="10"
            show-word-limit
            clearable
            :style="{ width: '100%' }"
          >
            <template #append>
              <span>亩</span>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="产权证编号" prop="canQuanNum">
          <el-input
            v-model="peaFrom.canQuanNum"
            placeholder="请输入土地产权证编号"
            clearable
            maxlength="30"
            show-word-limit
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="请上传承包土地经营证书(最多4张)" prop="landPho">
          <Upload
            v-model:modelValue="peaFrom.landPho"
            :id="peaFrom.hzId"
            max-limit="4"
          ></Upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider/>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="是否有流转他人土地" prop="hasTransLand">
          <el-radio-group v-model="peaFrom.hasTransLand">
            <el-radio
              v-for="item in dict.type.pea_yes_no"
              :key="item.value"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="流转面积（亩）" prop="transArea">
          <el-input
            v-model="peaFrom.transArea"
            placeholder="请输入流转面积（亩）"
            clearable
            maxlength="10"
            show-word-limit
            :style="{ width: '100%' }"
          >
            <template #append>
              <span>亩</span>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="山林面积（亩）" prop="treeArea">
          <el-input
            v-model="peaFrom.treeArea"
            placeholder="请输入山林面积"
            clearable
            maxlength="10"
            show-word-limit
            :style="{ width: '100%' }"
          >
            <template #append>
              <span>亩</span>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="林权证编号" prop="treeDeedNum">
          <el-input
            v-model="peaFrom.treeDeedNum"
            placeholder="请输入林权证编号"
            clearable
            maxlength="30"
            show-word-limit
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="上传林权证(最多4张)" prop="treeDeedPho">
          <Upload max-limit="4" v-model:model-value="peaFrom.treeDeedPho"></Upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-divider/>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="本人及配偶是否有农房" prop="hasFrameHouse">
          <el-radio-group v-model="peaFrom.hasFrameHouse">
            <el-radio
              v-for="item in dict.type.pea_yes_no"
              :key="item.value"
              :label="item.value"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item
          label="农房新旧程度"
          v-show="peaFrom.hasFrameHouse == 0"
          prop="newDanger"
        >
          <el-select
            v-model="peaFrom.newDanger"
            placeholder="请选择农房新旧程度"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in dict.type.pea_house_danger"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="农房结构"
          prop="houseJieGou"
          v-show="peaFrom.hasFrameHouse == 0"
        >
          <el-select
            v-model="peaFrom.houseJieGou"
            placeholder="请选择农房新旧程度"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in dict.type.pea_house_structure"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="农房楼层数" prop="houseHeight" v-show="peaFrom.hasFrameHouse == 0">
          <el-select
            v-model="peaFrom.houseHeight"
            placeholder="请选择农房楼层数"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in dict.type.pea_house_floor"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="楼房面积（平米）"
          prop="houseArea"
          v-show="peaFrom.hasFrameHouse == 0"
        >
          <el-select
            v-model="peaFrom.houseArea"
            placeholder="请选择农房面积"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in dict.type.pea_house_area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts">
export default {
  dicts: [
    "pea_marital_status",
    "pea_yes_no",
    "pea_education",
    "pea_sex",
    "pea_nationality",
    "pea_peo_num",
    "pea_farmer_type",
    "pea_house_danger",
    "pea_house_structure",
    "pea_house_floor",
    "pea_house_area",
    "pea_in_villager",
    "pea_has_null"
  ]
};
</script>

<style scoped lang="scss">

.el-divider-h4 {
  font-size: 15px;
  color: #00e4ff;
  font-weight: bold;
}
</style>
